<template>
  <div class="app-container" ref="appContainer">
    <el-card>
      <div class="card-box">
        <el-form :model="form">
          <el-form-item label="大厅公告">
            <el-input v-model="form.val" placeholder="" type="textarea" :autosize="{ minRows: 5, maxRows: 10 }">
            </el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" @click="handleSubmit()">提交修改</el-button>
          </el-form-item>
        </el-form>
      </div>

    </el-card>

  </div>
</template>
<script lang="ts" setup name="comprehensive">
import { HttpClient } from '@/utils/HttpClient'
import { UIHelper } from '@/utils/UIHelper'
import { ref,onMounted } from 'vue'

let form = ref({ val: '' })

let handleSubmit = () => {
  if (form.value.val.length == 0) {
    UIHelper.showMsg("公告内容不能为空")
    return
  }
    HttpClient.update_system_setting("notice", form.value.val, ()=>{
      UIHelper.showMsg("修改成功")
    })
}

onMounted(() => {
    HttpClient.get_notice((data:string)=>{
      form.value.val = data
    })
})

</script>
      
<style scoped lang="scss">
.header {
  display: flex;
  padding: 16px 16px 0 16px;
  margin-bottom: 16px;
  border-radius: 4px;
  background: white;
  box-shadow: 0 0 12px rgb(0 0 0 / 5%);

  .search-form {
    flex: 1;

    ::v-deep {
      .el-input--default {
        width: 200px;
      }
    }
  }

  .search {
    flex-shrink: 0;
    white-space: nowrap;
  }
}
</style>
      